<template>
  <div class="container">
    <div class="search">
      <img src="@/assets/images/home/search.png" alt="" />
      <input type="text" :placeholder="t('请输入搜索内容')" />
      <button class="btnsearch">{{ t("搜索") }}</button>
    </div>
    <div class="section" v-for="(item1, index1) in question" :key="index1">
      <div class="section-title">
        <div class="txt">{{ item1.problem_cat_name }}</div>
        <el-divider class="divider"></el-divider>
      </div>
      <div class="row" v-for="(item2, index2) in item1.children" :key="index2">
        <div class="row-view">
          <span class="row-title">{{ item2.title }}</span>
          <div class="flod" @click="flodClick(item2)">
            <img
              v-if="!item2.flod"
              src="@/assets/images/public/flod-0.png"
              alt=""
              srcset=""
            />
            <img
              v-if="item2.flod"
              src="@/assets/images/public/flod-1.png"
              alt=""
              srcset=""
            />
          </div>
        </div>
        <p class="desc" v-if="!item2.flod" v-html="item2.content"></p>
        <el-divider class="divider"></el-divider>
      </div>
    </div>
  </div>
</template>
<script>
import { getProblemList } from "@/utils/api";
export default {
  data() {
    return {
      question: [],
    };
  },
  created() {
    getProblemList().then((res) => {
      if (res.code == 1) {
        this.question = res.data;
      }
    });
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`常见问题.${v}`);
    },
    flodClick(item) {
      this.$set(item, "flod", !item.flod);
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  .search {
    width: 90%;
    height: 60px;
    background: #f9f9f9;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 10px 0px rgba(227, 227, 227, 0.41);
    border-radius: 30px;
    margin-left: 5%;
    overflow: hidden;
    display: flex;
    align-items: center;

    img {
      width: 25px;
      height: 25px;
      margin-left: 10px;
    }

    input {
      width: 82%;
      height: 100%;
      outline: none;
      border: 0;
      background-color: transparent;
      text-indent: 2em;
      font-size: 20px;
      font-weight: 400;
      color: #999999;
    }

    .btnsearch {
      width: 15%;
      height: 54px;
      background: #ff5757;
      border-radius: 30px;
      font-size: 20px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 54px;
      border: 0;
      outline: 0;
    }
  }

  .section {
    margin-top: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;

    .section-title {
      width: 100%;
      font-size: 22px;
      color: #222;

      .txt {
        color: #222;
        font-size: 22px;
        font-weight: 500;
      }
    }

    .row {
      width: 100%;

      .row-view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;

        .row-title {
          font-weight: 400;
          font-size: 20px;
          color: #222222;
        }

        .flod {
          margin-right: 22px;
        }
      }

      .desc {
        margin-top: 30px;
        font-weight: 400;
        font-size: 16px;
        color: #222222;
      }
    }

    .divider {
      margin-top: 16px;
    }
  }
}
</style>
